<clr-vertical-nav [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed">
  <ng-container *ngFor="let item of adminSideNav">
    <a
      *ngIf="item.type === sideNavType.NormalLink"
      clrVerticalNavLink
      [title]="item.a.title | translate"
      [routerLink]="item.a.link"
      [class.active]="getActive(item.a.link)">
      <clr-icon clrVerticalNavIcon [attr.shape]="item.a.icon.shape"></clr-icon>
      {{ item.a.text | translate }}
    </a>
    <div class="nav-divider" *ngIf="item.type === sideNavType.Divider"></div>
    <clr-vertical-nav-group
      *ngIf="item.type === sideNavType.GroupLink && (item.name !== 'edge-node' || this.authService.config['system.external-ip'])"
      routerLinkActive="active">
      <clr-icon clrVerticalNavIcon [title]="item.icon.title | translate" [class.is-solid]="item.icon.solid" [attr.shape]="item.icon.shape"></clr-icon>
      {{item.text | translate}}
      <clr-vertical-nav-group-children *clrIfExpanded="getExpand(item.links)">
        <ng-container *ngFor="let child of item.child">
          <a
            *ngIf="child.type !== sideNavType.Divider && (child.a.link !== 'apikey' || this.authService.config['enableApiKeys'])"
            clrVerticalNavLink
            [routerLink]="child.a.link"
            [class.active]="getActive(child.a.link, child.a.options)"
          >
            <clr-icon *ngIf="child.a.icon" clrVerticalNavIcon [attr.shape]="child.a.icon.shape" [class.is-solid]="child.a.icon.solid"></clr-icon>
            {{child.a.text | translate}}
          </a>
          <div class="nav-divider" *ngIf="child.type === sideNavType.Divider"></div>
        </ng-container>
      </clr-vertical-nav-group-children>
    </clr-vertical-nav-group>
  </ng-container>
</clr-vertical-nav>
